Grid Layout

基本

コンテナ　

グリッド全体を表す

display:grid; つける

インライン要素 display:inline-grid;

アイテム

グリッドのエリアに配置する要素

ライン

グリッドを分ける垂直および水平の線

グリッドの上下左右それぞれの両端にも存在

上あるいは左から1から

順に正の番号

下あるいは右から

-1から順に負の番号

トラック

グリッドの行および列

隣接する2本のラインの間

セル

隣接する垂直および水平方向のラインが作る、アイテムを配置できる最小単位

エリア

一つあるいは複数のセルが結合してできるセルの集まり

エリアには名前を付けることができ、アイテムを配置可能

fr

メインエリアの幅指定にfrという単位

グリッドコンテナーの中を分割するサイズの指定に使える単位

配置の方法

ラインの番号で指定する

エリアに名前を付けて指定する

code:grid.html

<div id="container"> <!-- コンテナ -->

<div id="itemA">A</div> <!-- アイテム -->

<div id="itemB">B</div> <!-- アイテム -->

<div id="itemC">C</div> <!-- アイテム -->

</div>

code:grid.css

display: grid; /* グリッドレイアウト */

grid-template-rows: 100px 50px;

grid-template-columns: 150px 1fr;

}

参考

絵でわかりやすい

GridのSandbox

デザインガイドライン